<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- head -->
      <el-row>
        <el-card>
          <boxCard />
        </el-card>
      </el-row>
      <!-- center -->
      <el-row>
        <el-col>
          <el-card style="height:300px ">
            <div ref="myEchart" class="myEchart" />
          </el-card>
        </el-col>
      </el-row>
      <!-- footer -->
      <el-row type="flex" :gutter="20">
        <el-col>
          <el-card style="height:250px">
            <el-tabs type="border-card" style="height:210px">
              <el-tab-pane label="最新消息">
                <h2>共同富裕需要房地产市场稳健发展</h2>
                <p>来源：经济日报 | 2021年10月27日 14:25:31</p>
                <p>原标题：共同富裕需要房地产市场稳健发展</p>
              </el-tab-pane>
              <el-tab-pane label="最新通知">最新通知</el-tab-pane>
              <el-tab-pane label="信息管理">信息管理</el-tab-pane>
              <el-tab-pane label="帮助中心">帮助中心</el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col>
          <el-card style="height:250px">
            <div ref="myEchart2" class="myEchart" style="height:250px" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition, LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  PieChart,
  LabelLayout,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])
export default {
  name: 'Dashboard',
  mounted() {
    this.myEchart1()
    this.myEchart2()
  },
  methods: {
    myEchart1() {
      var myChart = echarts.init(this.$refs.myEchart)
      var option
      option = {
        title: {
          text: '每周访问量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['青铜', '白银', '黄金', '砖石', '王者']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '青铜',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '白银',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '黄金',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '砖石',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 1320]
          },
          {
            name: '王者',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    myEchart2() {
      var chartDom = this.$refs.myEchart2
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '占用比例',
            type: 'pie',
            radius: [10, 70],
            center: ['45%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '青铜' },
              { value: 38, name: '白银' },
              { value: 32, name: '黄金' },
              { value: 30, name: '砖石' },
              { value: 28, name: '王者' },
              { value: 26, name: '荣耀王者' }

            ]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
}
.el-row{
  margin-bottom: 20px;

}
.myEchart{

  width: 100%;
  height:280px;
  // background-color: rgb(124, 92, 92);
}
</style>
